<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'

import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios';

const router = useRouter();

onMounted(() => {
    //绑定监听事件
    window.addEventListener('keydown', keyDown)
});

//点击回车键登录
const keyDown = (e) => {
    if (e.keyCode == 13 || e.keyCode == 100) {
        loginAction();
    }
}

var loginName = ref("root");
var loginPsw = ref("123456");

function loginAction() {
    console.log("logined")
    if (loginName === "") {
        ElMessage({
            message: '用户名不能空',
            type: 'warning',
        })
        return;
    }
    if (loginPsw === "") {
        ElMessage({
            message: '密码不能空',
            type: 'warning',
        })
        return;
    }
    axios.post('/api/token', {
        username: loginName.value,
        password: loginPsw.value
    }, {
        headers: { 'content-type': 'application/x-www-form-urlencoded' }
    }).then((result) => {
        console.log(result)
        // ElMessage({
        //     message: '登录成功',
        //     type: 'success',
        // })
        sessionStorage.setItem("u", loginName.value);
        sessionStorage.setItem("p", loginPsw.value);
        sessionStorage.setItem("token", (result.data.token));
        document.cookie=`token=${result.data.toke}`
        router.push('/');

    }).catch((error) => {
        console.log(error.message)
        ElMessage({
            message: '用户名或密码不正确',
            type: 'error',
        })
    });

}

</script>

<template>
    <div class="container">
        <div class="container-img">
            <div class="login-wrapper">
                <div class="header">视频AI智能应用平台</div>
                <div class="form-wrapper">
                    <input type="text" name="username" placeholder="username" class="input-item" v-model="loginName" />
                    <input type="password" name="password" placeholder="password" class="input-item" v-model="loginPsw" />
                    <div class="btn" @click="loginAction">登录</div>
                </div>
                <div class="msg">
                    ©2024 AI Corporation. All rights reserved.
                </div>
            </div>
        </div>

    </div>
</template>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to right, #8abcd9, #3ae0ae);
    overflow: hidden !important;

}

.container-img {
    position: relative;
    background: url("../assets/login/login-bg_01.svg") no-repeat;
    height: 100%;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    position: fixed;
}

.login-wrapper {
    background-color: #fffffffa;
    width: 358px;
    height: 450px;
    border-radius: 15px;
    padding: 0 50px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    color:#000
}

.input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

.input-item:placeholder {
    text-transform: uppercase;
}

.btn {
    user-select: none;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin-top: 50px;
    background-image: linear-gradient(to right, #a6c1ee, #49c3e1);
    color: #fff;
}

.btn:hover {
    text-align: center;
    padding: 10px;
    width: 100%;
    background-image: linear-gradient(to right, #c6d5ef, #78def7);
    color: #fff;
}

.btn:active {
    text-align: center;
    padding: 10px;
    width: 100%;
    background-image: linear-gradient(to right, #b7ccf1, #5dcde9);
    color: #fff;
}

.msg {
    text-align: center;
    line-height: 88px;
}

a {
    text-decoration-line: none;
    color: #abc1ee;
}
</style>